<template>
	<view class="content" @click="updLogin">
		<!-- 搜索 -->
		<view class="srchFor222" @click="srchFor">
			<u-search
				placeholder="请输入您所需要的产品名称"
				shape="round"
				:clearabled="true"
				bg-color="transparent"
				color="#DCDCDC"
				placeholder-color="#D9D9D9"
				:show-action="false"
				border-color="#454545"
			></u-search>
		</view>

		<!--轮播图 -->
		<!-- :autoplay="true" -->
		<view class="carouselPicOne">
			<swiper
				class="swiper-box"
				indicator-dots
				circular
				autoplay="true"
				:interval="3000"
				:duration="1000"
				@change="change"
				indicator-active-color="#fff"
				indicator-color="#E32A4A"
			>
				<swiper-item v-for="(item, index) in data.slideshow" :key="index" @click="toplink(item.link)">
					<view class="swiper-item"><image :src="item.image" mode=""></image></view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 立即选车 -->
		<view class="box">
			<view class="content1">
				<view class="top">
					<!-- 地址 -->
					<view class="citySelection">
						<view @click="cityjump">
							<text class="triangle">{{ navCity }}</text>
							<image src="../../static/home/saixuan3.png" mode=""></image>
						</view>
						<view @click="reverse">⇋</view>
						<view @click="cityjump2">
							<text class="triangle">{{ navCity2 }}</text>
							<image src="../../static/home/saixuan3.png" mode=""></image>
						</view>
					</view>
					<!-- 时间 -->
					<u-picker v-model="timeShow" mode="time" :show-time-tag="true" :params="params" @confirm="confirmTheTm"></u-picker>
					<u-picker v-model="timeShow2" mode="time" :show-time-tag="true" :params="params" @confirm="confirmTheTm2"></u-picker>
					<view class="calendar">
						<view class="tianBox f j-c a-e">
							<text class="f">{{ days || 1 }}天</text>
						</view>
						<view class="calendar1" @click="opnTheBulletBox(1)">
							<view class="left f f-d j-c">
								<text>用车</text>
								<text>时间</text>
							</view>

							<view class="right f f-d j-a">
								<text>{{ car.month }}月{{ car.day }}日</text>
								<text>{{ car.week }} {{ car.hour }}:{{ car.minute }}</text>
							</view>
						</view>
						<view class="calendar2" @click="opnTheBulletBox(0)">
							<view class="left f f-d j-c">
								<text>还车</text>
								<text>时间</text>
							</view>

							<view class="right f f-d j-a">
								<text>{{ retCar.month }}月{{ retCar.day }}日</text>
								<text>{{ retCar.week }}{{ retCar.hour }}:{{ retCar.minute }}</text>
							</view>
						</view>
					</view>

					<!-- 立即选车 -->
					<view class="carIcon"><image src="../../static/home/tubiao.png" mode="" @click="animation1"></image></view>
				</view>
			</view>
			<view class="content2 f f-w j-b">
				<view class="image1 " @click="custServInfo"></view>
				<view class="image2 " @click="becomeMbr"></view>
				<view class="image3 " @click="offpipe"></view>
				<view class="image4 " @click="custServInfo"></view>
			</view>
		</view>

		<!--  填充-->
		<view class="filling"></view>
		<view class="button"><view class="image "></view></view>
		<view class="bander f f-d a-c">
			<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen2.png" mode=""></image>

			<view class="text" v-if="dagel">
				倒计时：
				<u-count-down
					separator-size="18"
					font-size="18"
					:timestamp="shijiani1 | tmFmt"
					:separator="zh"
					:bg-color="transparent"
					separator-color="#fff"
					color="#fff"
				></u-count-down>
			</view>
			<view class="text" v-else>
				倒计时：
				<u-count-down
					separator-size="18"
					font-size="18"
					:timestamp="daytime | tmFmt"
					:separator="zh"
					:bg-color="transparent"
					separator-color="#fff"
					color="#fff"
				></u-count-down>
			</view>
		</view>
		<!-- 轮播图二 -->
		<ls-swiper
			:list="list1"
			@change="erchange"
			@clickItem="vehjunp"
			:crown="true"
			:loop="true"
			:shadow="true"
			height="280"
			previousMargin="150"
			nextMargin="150"
			imgRadius="5"
		>
			<template v-slot="{ data }">
				<image :src="data.back" mode="aspectFill" style="height: 100%; border-radius: 10rpx"></image>

				<view class="carouselslot f j-a a-c" style="flex-direction: column;">
					<text>{{ data.name }}</text>
					<text>￥{{ data.rent }}</text>
				</view>
			</template>
		</ls-swiper>
		<!-- 热门 -->
		<view class="popular f j-c"><image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen1.png" mode=""></image></view>
		<!-- 轮播三 -->
		<ls-swiper :list="list2" :crown="true" :loop="true" :shadow="true" height="280" nextMargin="180" imgRadius="10" previousMargin="20">
			<template v-slot="{ data }">
				<image :src="data.image" mode="" style="height: 100%"></image>
				<view class="carouselslot1 f f-d j-s">
					<text class="text">{{ data.name }}</text>
					<view class="box1 f a-c" v-for="(item1, index1) in data.list" :key="index1">
						<image :src="item1.hot_back" mode="aspectFill" style="border-radius: 10rpx" @click="popularJump(item1.id)"></image>
						<text @click="popularJump(item1.id)">{{ item1.name }}</text>
					</view>
				</view>
			</template>
		</ls-swiper>

		<!-- 最新资讯 -->
		<view class="latestNews f j-c"><image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen3.png" mode=""></image></view>
		<!-- 信息列表 -->

		<view v-for="(item2, index2) in data.message" :key="index2">
			<view class="infoLst">
				<view class="left f" v-if="index2 % 2 == 0" @click="jumpDetails(item2.id)">
					<view class="red"></view>
					<view class="info f-d f" style="margin-right: auto">
						<text class="text">
							<text class="r">{{ item2.title }}</text>
						</text>
						<u-parse :html="item2.content" class="text1"></u-parse>
					</view>
				</view>
				<view class="right f" v-else @click="jumpDetails()">
					<view class="info f-d f t-right" style="margin-left: auto">
						<text class="text">
							<text class="r">{{ item2.title }}</text>
						</text>
						<u-parse :html="item2.content" class="text1"></u-parse>
					</view>
					<view class="red"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import LsSwiper from '../../components/ls-swiper/index.vue';
import amap from '@/commonsdk/SDK/amap-wx.js';
// import api from '../../api/index.js';

export default {
	components: {
		LsSwiper,
	},
	data() {
		return {
			shijiani1: '',
			dagel: true,
			donghua1: '',
			// 轮播1
			lunbo: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/lunbotu.png',
			value: '',
			// 轮播2
			list1: [],
			// 轮播
			list2: [],
			data: {},
			daytime: '',
			uid: '',
			navCity: '',
			navCity2: '',
			timeShow: false,
			timeShow2: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
			},
			car: {
				year: '',
				day: '',
				hour: '',
				minute: '',
				month: '',
				week: '',
			},
			retCar: {
				year: '',
				day: '',
				hour: '',
				minute: '',
				month: '',
				week: '',
			},
			timeOne: '',
			timeTwo: '',
			days: '', // 多少天
			isXuanche: '',
		};
	},

	onLoad(e) {
		uni.setStorageSync('fid', e.user_id);

		this.uid = uni.getStorageSync('uid');

		this.hm();
		this.timeFormate();
		this.timeFormate1();
		this.getAddr();
	},
	filters: {
		tmFmt(mss) {
			let aa = Number(+new Date() / 1000).toFixed();
			let ab = mss - aa;
			// console.log('ab :>> ', ab);

			return ab;
		},
	},
	methods: {
		jumpDetails(id) {
			uni.navigateTo({
				url: './consDetails/consDetails?id=' + id,
			});
		},
		updLogin() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
		},
		opnTheBulletBox(e) {
			if (e) {
				// console.log('1111 :>> ');
				this.timeShow = true;
			} else {
				// console.log('000 :>> ');
				this.timeShow2 = true;
			}
		},
		// 相差多少天
		count() {
			let days = `${this.car.year}-${this.car.month}-${this.car.day}`;
			console.log('days :>> ', days);
			let days2 = `${this.retCar.year}-${this.retCar.month}-${this.retCar.day}`;
			console.log('days2 :>> ', days2);
			var days3 = (Date.parse(days2) - Date.parse(days)) / (1000 * 60 * 60 * 24); /*不用考虑闰年否*/

			this.isXuanche = days3;
			// console.log('this.isXuanche :>> ', this.isXuanche);
			if (days3 < 0) {
				return uni.$showMsg('还车时间不能小于用车时间');
			}
			if (days3 > 0 && days3 < 1) {
				return (this.days = 1);
			}
			this.days = Math.round(days3);
			// console.log('this.days :>> ', this.days);
		},

		//反转
		reverse() {
			// console.log('this.navCity2 :>> ', this.navCity2);
			// console.log('this.navCity :>> ', this.navCity);
			var a = this.navCity;
			this.navCity = this.navCity2;
			this.navCity2 = a;
		},
		// 获取现在时间
		timeFormate() {
			let myDate = new Date();
			console.log(myDate);
			let wk = myDate.getDay();
			let yy = String(myDate.getFullYear());
			let mm = myDate.getMonth() + 1;
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
			let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
			let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
			let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
			let weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			let week = weeks[wk];

			this.car.month = mm;
			this.car.year = yy;
			this.car.day = dd;
			this.car.hour = hou;
			this.car.minute = min;
			this.car.week = week;

			this.timeOne = `${yy}-${mm}-${dd} ${hou}:${min}`;
		},
		timeFormate1() {
			var curDate = new Date();
			let myDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000);
			// console.log('myDate :>> ', myDate);
			let wk = myDate.getDay();
			let yy = String(myDate.getFullYear());
			let mm = myDate.getMonth() + 1;
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
			let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
			let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
			let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
			let weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			let week = weeks[wk];

			this.retCar.month = mm;
			this.retCar.year = yy;
			this.retCar.day = dd;
			this.retCar.hour = hou;
			this.retCar.minute = min;
			this.retCar.week = week;
			this.timeTwo = `${yy}-${mm}-${dd} ${hou}:${min}`;
		},

		confirmTheTm(e) {
			// console.log('e :>> ', e);
			this.car.day = e.day;
			this.car.year = e.year;
			this.car.hour = e.hour;
			this.car.minute = e.minute;
			this.car.month = e.month;
			this.timeOne = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			var dateString = e.year + '-' + e.month + '-' + e.day;
			var dateObject = new Date(dateString);
			let weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

			this.car.week = weeks[dateObject.getDay()];
			this.count();
		},
		confirmTheTm2(e) {
			// console.log('e---------- :>> ', e);
			this.retCar.day = e.day;
			this.retCar.year = e.year;
			this.retCar.hour = e.hour;
			this.retCar.minute = e.minute;
			this.retCar.month = e.month;
			this.timeTwo = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			var dateString = e.year + '-' + e.month + '-' + e.day;
			var dateObject = new Date(dateString);
			// console.log('dateObject :>> ', dateObject);
			let weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

			this.retCar.week = weeks[dateObject.getDay()];
			// console.log('dateObject.getDay() :>> ', dateObject.getDay());

			// 算出天数
			// console.log('算出天数.timeOne :>> ', this.timeOne);
			// console.log('算出天数.timeTwo :>> ', this.timeTwo);
			this.count();
		},

		cityjump() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			uni.navigateTo({
				url: './selectCity/selectCity',
			});
		},
		cityjump2() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			uni.navigateTo({
				url: 'selectCity2/selectCity',
			});
		},
		erchange(e) {
			if (e.day_time) {
				this.daytime = e.day_time;
				this.dagel = false;
			}
		},
		//首页
		async hm() {
			const res = await this.$u.post('api/car/car_index');
			if (!res.code) return uni.$showMsg();
			this.data = res.data;
			if (res.data.special.length) {
				this.shijiani1 = res.data.special[0].day_time;
			}
			this.list1 = res.data.special;
			this.list2 = res.data.hot;
		},
		//顶部跳转
		toplink(link) {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			uni.switchTab({
				url: link,
			});
		},
		// 特价跳转
		vehjunp(e) {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}

			let obj = {
				id: e.id,
				agent: 0,
			};

			uni.navigateTo({
				url: '../garage/garageDetails/garageDetails?obj=' + JSON.stringify(obj),
			});
		},
		// 热门跳转
		popularJump(e) {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			// console.log('e :>> ', e);

			let obj = {
				id: e,
				agent: 0,
			};

			uni.navigateTo({
				url: '../garage/garageDetails/garageDetails?obj=' + JSON.stringify(obj),
			});
		},
		// 客服资讯和商务接待
		custServInfo(e) {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			// console.log('e :>> ', e);
			uni.switchTab({
				url: '../information/information',
			});
		},
		// 成为会员
		becomeMbr(e) {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			// console.log('e :>> ', e);
			uni.navigateTo({
				url: '../my/mbrDetails/mbrDetails',
			});
		},
		// 脱管
		offpipe() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			uni.navigateTo({
				url: '../my/hosting/hosting',
			});
		},
		// 跳转车库
		jumpGarage() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}

			if (!this.timeTwo) return uni.$showMsg('请选择还车时间');
			
			
			
			if (this.isXuanche < 0) {
				return uni.$showMsg('还车时间不能小于用车时间');
			}
			var homepage = {};
			homepage['place'] = this.navCity;
			homepage['time_quantum'] = `${this.timeOne},${this.timeTwo}`;

			getApp().globalData.homepage = homepage;
			uni.switchTab({
				url: '../garage/garage',
			});
		},
		change(e) {
			console.log('e :>> ', e);
		},
		animation1() {
			this.donghua1 = 'animation-shake';
			setTimeout(() => {
				this.donghua1 = '';
			}, 1000);
			this.jumpGarage();
		},

		//搜索
		srchFor() {
			if (!uni.getStorageSync('uid')) {
				uni.navigateTo({
					url: '../logIn/logIn',
				});
			}
			uni.navigateTo({
				url: './searchFor',
			});
		},
		// 获取地址
		getAddr() {
			this.amapPlugin = new amap.AMapWX({
				//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
				key: 'b9f002e72df0b071c51a8237c18b07a5',
			});

			// 获取信息中
			uni.showLoading({
				title: '获取信息中',
			});
			//定位地址
			this.amapPlugin.getRegeo({
				success: data => {
					// console.log('data: ', data);
					this.navCity = data[0].regeocodeData.addressComponent.city.replace(/市/g, ''); //把"市"去掉
					this.navCity2 = data[0].regeocodeData.addressComponent.city.replace(/市/g, '');
					// console.log('定位的地址 :>> ', this.navCity);
					// console.log('定位的地址 :>> ', this.navCity2);
					getApp().globalData.locationAddr = data[0].regeocodeData.addressComponent.city.replace(/市/g, ''); //province
					// getApp().globalData.locationAddr = data[0].regeocodeData.addressComponent.province.replace(/省/g, '');  //province
				},
			});
			// // 因此提示信息
			uni.hideLoading();
		},

		getList() {
			var res1 = [
				{
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen4.png',
					name: '1',
				},
				{
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen4.png',
					name: '2',
				},
				{
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/remen4.png',
					name: '3',
				},
			];
			this.list1 = res1;
			var res2 = [
				{
					id: '001',
					label: '性能超跑',
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/666.png',
					imgUrl1: 'http://ww1.sinaimg.cn/large/006CFcGUgy1gjy18pf6c6j306g03mdh3.jpg',
					munber: 8,
					titl: '迈凯伦 720S',
					child: [
						{
							name: '法拉利 458',
							imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/lunbo.png',
						},
						{
							name: '法拉利 458',
							imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/lunbo.png',
						},
						{
							name: '法拉利 458',
							imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/lunbo.png',
						},
					],
				},
				{
					id: '002',
					label: '性能超跑1',
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/666.png',
					imgUrl1: 'http://ww1.sinaimg.cn/large/006CFcGUgy1gjy18pf6c6j306g03mdh3.jpg',
					munber: 9,
					titl: '迈凯伦 720S',
				},
				{
					id: '003',
					label: '性能超跑',
					imgUrl1: 'http://ww1.sinaimg.cn/large/006CFcGUgy1gjy18pf6c6j306g03mdh3.jpg',
					imgUrl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/666.png',
					munber: 8,
					titl: '迈凯伦 720S',
				},
			];
			this.list2 = res2;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	padding-bottom: 45rpx;
	background-color: #1b1b1b;
	.srchFor222 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100rpx;
		z-index: 999;
		padding: 28rpx 33rpx;
	}
	/deep/.u-input {
		font-size: 21rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		//color: #dcdcdc;
		letter-spacing: 1rpx;
	}
	/deep/ .u-action {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		//color: #ffffff;
	}
	/deep/ .u-icon__icon {
		margin-left: 54rpx;

		&::after {
			content: '丨';
			font-size: 21rpx;
			color: #cdcdcd;
			vertical-align: middle;
			display: flex;
			align-items: center;
			margin-left: 31rpx;
			margin-right: 29rpx;
		}
	}
	// 第一个轮播图
	.lunbotuer {
		.tab {
			width: 100%;
			height: calc(100% - 20rpx);
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 8rpx;
			background-color: #000;
			box-shadow: 0 0 14rpx 0 rgba(0, 0, 0, 0.1);
			.tab-img {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
				opacity: 0.6;
				box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
			}

			.tab-title {
				position: absolute;
				top: 378rpx;
				left: 32rpx;
				width: 339rpx;
				height: 79rpx;
				background: #7f7f7f;
				opacity: 0.8;
				border-radius: 15rpx;
				margin: 0 auto;
				line-height: 79rpx;
				text-align: center;
			}
		}
	}
	// .ddd{

	// }
	//第二个轮播图
	.carouselslot {
		position: absolute;
		bottom: 29rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 339rpx;
		height: 79rpx;
		background: #7f7f7f;
		opacity: 0.8;

		border-radius: 15rpx;

		text:nth-child(1) {
			height: 19rpx;
			font-size: 21rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 19rpx;
		}
		text:nth-child(2) {
			height: 26rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 26rpx;
		}
	}
	.carouselslot1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		//background-color: #18B566;
		padding: 38rpx 33rpx;
		.text {
			height: 29rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 29rpx;
		}
		.box1 {
			margin-top: 25rpx;
			image {
				width: 232rpx;
				height: 130rpx;
				margin-right: 23rpx;
			}
			text {
				height: 23rpx;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				line-height: 23rpx;
			}
		}
	}
	// 信息列表
	.infoLst {
		margin-top: 45rpx;
		.left {
			.red {
				margin-left: -7rpx;
				margin-right: 17rpx;
				width: 14rpx;
				height: 209rpx;
				background: #870000;
				border-radius: 29rpx;
			}
		}
		.right {
			.red {
				margin-right: -7rpx;
				margin-left: 17rpx;
				width: 14rpx;
				height: 209rpx;
				background: #870000;
				border-radius: 29rpx;
			}
		}
		.left,
		.right {
			width: 100vw;

			.info {
				width: 580rpx;
				height: 210rpx;
				background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%2015%402x.png') no-repeat
					center;
				background-size: cover;
				padding: 40rpx 60rpx;
				overflow: hidden;
				.text {
					text {
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 700;
						color: #e6e6e6;
						line-height: 24rpx;
						border-bottom: 7rpx solid #b50000;
					}
				}
				/deep/ .text1 {
					// height: 173rpx;
					margin-top: 25rpx;
					overflow: hidden !important;
					line-height: 26rpx;
					font-size: 16rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #e6e6e6;
				}
			}
		}
	}

	//最新资讯
	.latestNews {
		margin-top: 76rpx;

		image {
			width: 518rpx;
			height: 52rpx;
		}
	}
	// 热门车型
	.popular {
		margin-top: 76rpx;
		margin-bottom: 42rpx;
		image {
			width: 518rpx;
			height: 52rpx;
		}
	}

	// 今日特价
	.bander {
		padding-top: 78rpx;
		image {
			width: 518rpx;
			height: 52rpx;
		}
		.text {
			margin-top: 11rpx;
			margin-bottom: 46rpx;
			height: 17rpx;
			font-size: 18rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #e8e8e8;
			line-height: 17rpx;
		}
	}

	// bander 图片
	.button {
		width: 100vw;
		height: 170rpx;
		background-color: #1b1b1b;
		.image {
			width: 100vw;
			height: 170rpx;
			background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E4%B8%AD%E9%97%B4banner%402x.png') no-repeat center;
			background-size: cover;
		}
	}
	// 填充
	.filling {
		width: 100%;
		height: 641rpx;
		background-color: #1b1b1b;
	}
	// 轮播一
	.carouselPicOne {
		background-color: #000000;
		swiper {
			width: 100%;
			height: 543rpx;
			image {
				width: 100%;
				height: 543rpx;
			}
		}
	}

	.box {
		position: absolute;
		// margin-top: -186rpx;
		margin-top: -99rpx;
		z-index: 99999;
		width: 100%;
		background-color: #000000;

		box-sizing: border-box;

		.content1 {
			margin: 0 auto;
			width: 716rpx;
			.top {
				width: 100%;
				height: 432rpx;
				padding: 43rpx 35rpx 0 35rpx;
				box-sizing: border-box;

				background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/zhujian64.png) no-repeat center;
				background-size: cover;
				.citySelection {
					display: flex;

					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					justify-content: center;
					background: #1c1c1c;
					border: 1rpx solid rgba(255, 255, 255, 0.16);
					box-shadow: 3rpx 4rpx 7rpx 0rpx rgba(0, 0, 0, 0.13), 1rpx 7rpx 16rpx 0rpx rgba(0, 0, 0, 0.55);
					border-radius: 27px;
					view {
						flex: 1;
						font-size: 29rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #f1f1f1;
						image {
							width: 8rpx;
							height: 8rpx;
							margin-left: 10rpx;
						}
					}
				}
				.calendar {
					position: relative;
					display: flex;
					justify-content: space-between;
					margin-top: 33rpx;
					width: 649rpx;
					height: 98rpx;

					.tianBox {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 120rpx;
						height: 24rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #e2e2e2;

						text {
							font-size: 25rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #e2e2e2;

							&::after {
								content: '-';
								margin-left: 10rpx;
							}
							&::before {
								content: '-';
								margin-right: 10rpx;
							}
						}
					}
					.calendar1,
					.calendar2 {
						display: flex;
						justify-content: space-between;
						width: 252rpx;
						height: 99rpx;
						background: #242424;
						border-radius: 15rpx;
						padding: 13rpx 17rpx;
						box-sizing: border-box;
						.left {
							padding: 8rpx 14rpx;

							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #dadada;
							background-color: #393939;
							border-radius: 15rpx;
							text {
								line-height: 30rpx;
							}
						}
						.right {
							text:nth-child(1) {
								height: 24rpx;
								font-size: 26rpx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #dadada;
								line-height: 24rpx;
							}
							text:nth-child(2) {
								height: 18rpx;
								font-size: 20rpx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #747474;
								line-height: 18rpx;
							}
						}
					}
				}
				.carIcon {
					position: absolute;
					top: 247rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 161rpx;
					height: 161rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.content2 {
			width: 716rpx;

			margin: 0 auto;
			margin-top: -40rpx;
			//background-color: #007aff;
			.image1,
			.image2,
			.image3,
			.image4 {
				width: 346rpx;
				height: 166rpx;
			}
			.image1 {
				background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/0.4.png') no-repeat center;
				background-size: cover;
				margin-bottom: 14rpx;
			}
			.image2 {
				background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/0.1.png') no-repeat center;
				background-size: cover;
				margin-bottom: 14rpx;
			}
			.image3 {
				background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/0.3.png') no-repeat center;
				background-size: cover;
			}
			.image4 {
				background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/0.2.png') no-repeat center;
				background-size: cover;
			}
		}
	}
	.searchFor {
		position: absolute;
		z-index: 55666;
		top: 28rpx;
		left: 50%;
		width: 684rpx;
		height: 61rpx;
		border: 2rpx solid #454545;
		border-radius: 31rpx;
		transform: translateX(-50%);
		display: flex;
		.left {
			width: 117rpx;
			text-align: center;
			line-height: 69rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.verticalLine {
			width: 4rpx;
			height: 19rpx;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #cdcdcd;
			line-height: 58rpx;
			opacity: 0.5;
		}

		.right {
			padding: 9rpx 60rpx;
			font-size: 25rpx;

			font-family: Microsoft YaHei;
			font-weight: 400;

			color: #d9d9d9;

			opacity: 0.5;
		}
	}
}
</style>
